<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    {{ msgfromfather }}
    <button type="button" name="button" v-on:click="onClickMe">Click!</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: 'hello from component a',
    }
  },
  props: ['msgfromfather'],
  events: {
    onAddNew: function(itmes) {
      console.log(itmes)
    }
  },
  methods: {
    onClickMe: function() {
      console.log(this.msgfromfather)
      // this.$emit('children-tell-me-something', this.msg)
      // version 2
      this.$dispatch('children-tell-me-something', this.msg + ' from c c')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>
